<template>
  <div>
    <h1>App</h1>
    <p>count:{{ $store.state.count }}</p>
    <p>count:{{ count }}</p>
  </div>
</template>

<script>
// 使用vuex中的mapState方法 来自动生成 计算属性
import { mapState } from "vuex";
// import store from "./stores/index.js";
// console.log(store);
export default {
  name: "App",
  mounted() {
    console.log(this, "app");

    // mapState的使用 参数是一个数组，数组内是我们要去store拿的值
    // mapState返回一个对象，对象内部其实就是读取的对应的计算属性的方法
    // const result = mapState(["count", "num"]);
    // console.log(result);
    // 我们在测试的时候，直接调用count方法，因为this不是指向组件实例，所以看不出来效果
    // 我们可以强制的把count方法中的this指向改为组件实例 可以看到结果
    // console.log(result.count.apply(this));
  },
  computed: {
    // 可以使用计算属性来简化写法
    // count() {
    //   return this.$store.state.count;
    // },
    // num() {
    //   return this.$store.state.num;
    // },
    // 可以直接展开
    ...mapState(["count", "num"]),
  },
};
</script>

<style></style>
